<!--
 * @Author: zhangjingyu
 * @Date: 2021-03-26 14:26:03
 * @LastEditors: zhangjingyu
 * @LastEditTime: 2021-03-29 14:57:52
 * @FilePath: \vprisk10.14\src\views\ftpManage\pricingTrial\onlineConfiger\com\planTbaleCom.vue
 * @Description: 支付计划表组件
-->
<template>
  <div>
    <!-- 操作区域 -->
    <upper-template
      @search="(searchForm.page = 1), searchFunc()"
      @clear="searchForm.dataDt = ''"
      :configIcon="false"
    >
      <!-- 操作按钮区 -->
      <template slot="buttonArea">
        <el-button @click="addFunc()">新增</el-button>
        <el-button @click="editFunc()">编辑</el-button>
        <el-button @click="delFunc()">删除</el-button>
        <!-- <el-button @click="isPlanShow = false">关闭</el-button> -->
      </template>
      <!-- 搜索区 -->
      <template slot="searchArea">
        <el-form
          :model="searchForm"
          ref="searchForm"
          label-width="60px"
          label-position="left"
          size="mini"
        >
          <el-form-item label="日期：">
            <el-date-picker
              v-model="searchForm.dataDt"
              placeholder="选择日期"
            ></el-date-picker>
          </el-form-item>
        </el-form>
      </template>
    </upper-template>
    <el-table ref="multipleTable" :data="tableData" @row-click="rowChecked">
      <el-table-column width="55" type="selection"></el-table-column>
      <el-table-column
        prop="payPlanKey.acctNo"
        label="账号"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        prop="payPlanKey.dataDt"
        label="数据日期"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        prop="payPlanKey.planPmtDt"
        label="支付日期"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column prop="pmtTp" label="支付类型代码" show-overflow-tooltip>
      </el-table-column>
      <el-table-column
        prop="planPmtPrin"
        label="支付本金"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        prop="planPmtIntst"
        label="支付利息"
        show-overflow-tooltip
      >
      </el-table-column>
    </el-table>
    <pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="searchForm.page"
      :page-size="searchForm.size"
      @refresh="searchFunc"
      :total="total"
    ></pagination>
    <div slot="footer"></div>
    <!-- 新增编辑弹窗 -->
    <el-dialog
      title="支付计划表"
      v-dialogDrag
      :visible.sync="addOrEdit"
      width="514px"
      append-to-body
    >
      <el-form
        :model="saveForm"
        ref="saveForm"
        :disabled="saveFlg == 3"
        label-width="130px"
        label-position="left"
        :rules="saveFormRules"
      >
        <el-form-item label="数据日期" prop="dataDt">
          <el-date-picker
            v-model="saveForm.dataDt"
            style="width:100%"
            placeholder="选择日期"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="支付日期" prop="planPmtDt">
          <el-date-picker
            v-model="saveForm.planPmtDt"
            style="width:100%"
            placeholder="选择日期"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="支付本金" prop="planPmtPrin">
          <el-input
            v-model="saveForm.planPmtPrin"
            maxlength="40"
            placeholder="请输入..."
          ></el-input>
        </el-form-item>
        <el-form-item label="支付利息" prop="planPmtIntst">
          <el-input
            v-model="saveForm.planPmtIntst"
            maxlength="40"
            placeholder="请输入..."
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="saveFunc">保 存</el-button>
        <el-button @click="addOrEdit = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { pricingTrial } from "@/api/index";
import { getDict } from "@/api/getDict";
export default {
  data() {
    return {
      addOrEdit: false,
      saveFlg: 1,
      searchForm: {
        acctNo: "",
        dataDt: "",
        page: 1,
        size: 15
      },
      saveForm: {
        dataDt: "",
        planPmtDt: "",
        planPmtPrin: "",
        planPmtIntst: "",
        pmtTp: ""
      },
      saveFormRules: {
        dataDt:[{required:true,message:"该项为必填",trigger:"blur"}],
        planPmtDt:[{required:true,message:"该项为必填",trigger:"blur"}],
        planPmtPrin:[{required:true,message:"该项为必填",trigger:"blur"},
        {
            pattern: /(^[0-9]{1,18}$)|(^[0-9]{1,18}[\.]{1}[0-9]{1,4}$)/,
            message: "只能输入整数小于18位，小数小于4位的数字",
            trigger: "blur"
          }],
        planPmtIntst:[{required:true,message:"该项为必填",trigger:"blur"},
        {
            pattern: /(^[0-9]{1,18}$)|(^[0-9]{1,18}[\.]{1}[0-9]{1,4}$)/,
            message: "只能输入整数小于18位，小数小于4位的数字",
            trigger: "blur"
          }],
      },
      total: 0,
      tableData: []
    };
  },
  props: {
    acctNo: {
      type: String,
      default: ""
    },
    isPlanShow: {
      type: Boolean,
      default: false
    }
  },
  created() {
        this.searchFunc();
    
  },
  watch: {
    isPlanShow() {
      if (this.isPlanShow == true) {
        this.searchFunc();
      }
    }
  },
  methods: {
    searchFunc() {
      let data = this.searchForm;
      data.acctNo = this.acctNo;
      pricingTrial.payPlanFindAll(data).then(res => {
        if (res.code == 200) {
          this.tableData = res.rows;
          this.total = res.total;
        }
      });
    },
    rowChecked(row) {
      if (this.$refs.multipleTable) {
        this.$refs.multipleTable.clearSelection();
        this.$refs.multipleTable.toggleRowSelection(row, true);
      }
    },
    saveFunc() {
      this.$refs["saveForm"].validate(valid => {
        if (valid) {
          let data = {
            operateType: this.saveFlg,
            payPlan: {
              payPlanKey: {
                acctNo: this.acctNo,
                dataDt: this.saveForm.dataDt,
                planPmtDt: this.saveForm.planPmtDt
              },
              planPmtIntst: this.saveForm.planPmtIntst,
              planPmtPrin: this.saveForm.planPmtPrin,
              pmtTp: this.saveForm.pmtTp
            }
          };
          pricingTrial.payPlanSave(data).then(res => {
            if (res.code == 200) {
              this.$message.success("保存成功");
              this.addOrEdit = false;
              this.searchFunc();
            } else {
              this.$message.error(res.message || "保存失败");
            }
          });
        } else {
          this.$message.error("您有校验未通过，请检查表单");
        }
      });
    },
    addFunc() {
      this.saveFlg = 1;
      for (let k in this.saveForm) {
        this.saveForm[k] = "";
      }
      this.addOrEdit = true;
    },
    deitFunc(){
        this.saveFlg = 2;
      let selection = this.$refs.multipleTable.selection;
      if (selection.length != 1) {
        return this.$message.warning("请选择一条数据进行修改");
      }
      let row = selection[0];
      this.saveForm.dataDt = row.payPlanKey.dataDt;
      this.saveForm.planPmtDt = row.payPlanKey.planPmtDt;
      this.saveForm.planPmtIntst = row.planPmtIntst+"";
      this.saveForm.planPmtPrin = row.planPmtPrin+"";
      this.saveForm.pmtTp = row.pmtTp+"";
    },
    delFunc() {
      let selection = this.$refs.multipleTable.selection;
      if (selection.length < 1) {
        return this.$message.warning("请选择要删除的数据");
      }
      this.$confirm("您确定要删除选中数据吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          let data = { ids: selection.map(v => {
            let obj = {acctNo:v.payPlanKey.acctNo,
          dataDt:v.payPlanKey.dataDt,
          planPmtDt:v.payPlanKey.planPmtDt
          }
          return obj;
          }) };
          pricingTrial.payPlanRemove(data).then(res => {
            if (res.code == 200) {
              this.$message.success("删除成功");
              this.searchFunc();
            } else {
              this.$message.error(res.message || "删除失败");
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.searchForm.size = val;
      this.searchFunc();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.searchForm.page = val;
      this.searchFunc();
    }
  }
};
</script>

<style lang="scss" scoped>
</style>